<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>

  <!-- weui -->
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
  <!-- swiper -->
  <!-- <link rel="stylesheet" href="../../assets/lib/swiper/swiper.css"> -->
</head>

<body>
  <!-- 头部 -->
  <header>
    <!-- 轮播图 -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-bg1"></div>
        <div class="swiper-slide swiper-bg2"></div>
        <div class="swiper-slide swiper-bg3"></div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>


    </div>
  </header>
  <!-- 主体 -->
  <main>
    <ul>
      <li class="content1">
        <div>
          <h2>今日排名</h2>
          <h3 id="ranking"></h3>
        </div>
        <div>
          <h2 id="clockCount"></h2>
          <h3 id="clockBtn">今日打卡</h3>
        </div>
      </li>
      <li class="content2">
        <div>
          <h2>运动数据</h2>
        </div>
        <div>
          <h2>累计运动徽章</h2>
          <h3>
            <span id="badges"></span>
            <span>枚</span>
          </h3>
        </div>
      </li>
      <li id="goCourse" class="content3">
        <div>
          <h2>课程训练</h2>
        </div>
      </li>
      <li id="goRun" class="content4">
        <div>
          <h2>户外跑步</h2>
        </div>
      </li>
    </ul>
  </main>



  <!-- swiper -->
  <!-- <script src="../../assets/lib/swiper/swiper.js"></script> -->
  <!-- weui -->
  <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
</body>

</html>